import React, { useContext } from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu';

export interface MenuItemProps {
  index?: string;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}
const MenuItem:React.FC<MenuItemProps> = (props) => {
  const {index, disabled, className, style, children } = props;
  const context = useContext(MenuContext);
  const classes = classNames('menu-item', className, {
    'is-disabled': disabled,
    'is-active': context.index === index,
  })

  const handleClick = () => {
    console.log('item handleClick....', index);
    if (context.onSelect && !disabled) {
      context.onSelect(index || '0')
    }
  }

  return <li className={classes} style={style} onClick={handleClick}>{children}</li>;

}

// 定义组件名，在父组件调用时，children 里面只能包含此组件名。
MenuItem.displayName = 'MenuItem';
export default MenuItem;